/*
* @Author: Yejing
* @Date: 2023-06-10 10:31:18
* @LastEditors: Yejing
* @LastEditTime: 2023-06-10 17:30:02
* @Description: desc
*/
<template>
	<view class="recharge-affirm-container">
		<c-layout>
			<c-navigation-bar slot="head" :title="$t('user.recharge')"></c-navigation-bar>
			<view class="container">
				<view class="recharge-affirm-from">
					<!-- <view class="item" v-for="item in currentRechargeAffirm">
						<titleInput :title="item.lab" :paddingLeft="'40rpx'" :value="vuex_recharge_data[item.key]">
							<view class="leftIcon" :slot="item.key=='amount'?'left-icon':''">
								$
							</view>
						</titleInput>
					</view> -->
					<view class="" v-if="activeRechargeWay==='0'">
						<titleInput :title="rechargeAffirmBank[0].lab" disabled=false type="" focusColor="#2934D0" v-model="vuex_recharge_data.userName" :paddingLeft="'40rpx'" style="margin-bottom: 40rpx;"></titleInput>
						<titleInput :title="rechargeAffirmBank[1].lab" disabled=false :paddingLeft="'40rpx'" :value="vuex_recharge_data.bankName" style="margin-bottom: 40rpx;"></titleInput>
						<titleInput :title="rechargeAffirmBank[2].lab" disabled=false :paddingLeft="'40rpx'" :value="vuex_recharge_data.bankNo" style="margin-bottom: 40rpx;"></titleInput>
					</view>
					<view class="" v-else>
						<titleInput :title="$t('recharge.walletAddress')" disabled=false :paddingLeft="'40rpx'" :value="usdtInfo.bankNo" style="margin-bottom: 40rpx;"></titleInput>
					</view>
					<titleInput :title="rechargeAffirmBank[4].lab" disabled=false :paddingLeft="'40rpx'" :value="vuex_recharge_data.channelName" style="margin-bottom: 40rpx;"></titleInput>
					<titleInput :title="rechargeAffirmBank[5].lab" disabled=false :paddingLeft="'40rpx'" :value="vuex_recharge_data.amount" style="margin-bottom: 40rpx;">
						<view class="leftIcon" slot="left-icon">
							$
						</view>
					</titleInput>
					<view class="item" v-if="this.rechargeType">
						<titleInput :title="$t('storeManagement.pattern')" :value="payMethodList[vuex_recharge_data.bankType]">

						</titleInput>
					</view>
					<view class="item upload-img">
						<h3>{{$t('storeManagement.Recharge_screenshot')}}</h3>
						<view class="">
							<!-- 							<u-upload ref="upload" :auto-upload="false" :show-progress="false" :max-count="1"
							
								@on-choose-complete="imageChoose" @on-remove="imageRemove" :file-list="fileList">
							</u-upload> -->
							<view class="my-upload" @click.prevent="(!voucherImg) && addImage()">
								<imageForSize v-if="voucherImg" size="200" :src="$u.file.getMedieUrl(voucherImg)" mode="">
								</imageForSize>
								<u-icon v-if="!voucherImg" name="photo" size="100" :color="$u.color['lightColor']"></u-icon>
								<view @click.stop="()=>voucherImg=''" v-if="voucherImg" class="del-icon"
									style="position: absolute;right: 10rpx;top: 10rpx;background-color: red;border-radius: 50%;padding: 6rpx;">
									<u-icon size="30" style="color: #fff;display: block;" name="close"></u-icon>
								</view>
							</view>
						</view>
					</view>
					<view class="submit-btn">
						<button type="default" @click="rechargeAffirm">
							<u-loading :show="isloading" mode="flower" style="margin-right: 10rpx;"></u-loading>
							{{$t('system.Submit')}}
						</button>
					</view>
				</view>
			</view>
		</c-layout>
		<promptDialog ref="promptDialog"></promptDialog>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isloading:false,
				bankCardData: { // 银行卡信息
					"bankName": "",
					"bankNo": "",
					"bankUserName": "",
					"cardType": "",
					"type": "",
					"usdtType": "",
					"userName": ""
				},
				userName:'',
				// 确认表单信息
				rechargeAffirmBank: [{
						lab: this.$t('user.nickName'),
						key: 'rechargeName'
					},
					{
						lab: this.$t('card.bankName'),
						key: 'bankName'
					},
					{
						lab: this.$t('card.bankNo'),
						key: 'bankNo'
					},
					{
						lab: this.$t('storeManagement.MailBox'),
						key: 'email'
					},
					{
						lab: this.$t('recharge.channelTips'),
						key: 'channelName'
					},
					// {
					// 	lab: 'channelId',
					// 	key: 'channelId'
					// },
					{
						lab: this.$t('recharge.amount'),
						key: 'amount'
					},
				],
				// 使用usdt充值的显示信息对象
				rechargeAffirmUsdt: [{
						lab: this.$t('addAddress.address'),
						key: 'bankNo'
					},
					{
						lab: this.$t('recharge.amount'),
						key: 'amount'
					},
				],
				storeRechargeAffirm: [{
						lab: this.$t('recharge.amount'),
						key: 'amount'
					},
					{
						lab: this.$t('recharge.channelTips'),
						key: 'channelName'
					},
					{
						lab: 'channelId',
						key: 'channelId'
					},
					{
						lab: 'description',
						key: 'description'
					},
				],
				// 充值信息
				voucherImg: '',
				vuexToken: uni.getStorageSync('vuex_token'),
				// 文件列表
				fileList: [],
				rechargeType: 0, // 类型 0 --- 个人充值确认   1 --- 店铺充值确认
				payMethodList: [this.$t('recharge.bankCard'), 'USDT', this.$t('recharge.amount')],
				currentType:0,
				bankInfo:'',
				activeRechargeWay:'',
				usdtInfo:{}
			};
		},
		// {type:类型}
		onLoad(option) {
			console.log(option.type)
			console.log(option.type1)
			console.log(this.vuex_recharge_data)
			this.activeRechargeWay=option.type1
			if(this.activeRechargeWay==='1'){
				this.$u.get('/app/user/bank/bank/1/TRC-20').then(res => {
					if(res.data.length){
						console.log(res.data[0]);
						this.usdtInfo=res.data[0]
					}
				})
			}
	this.bankInfo=1
			console.log(option)
			this.rechargeType = ~~option.type
			// 当是usdt提交时，获取地址类型
			if (this.vuex_recharge_data.bankType === '1') {
				this.$set(this.rechargeAffirmUsdt, 0, {
					lab: this.vuex_recharge_data.usdtType,
					key: 'bankNo'
				})
			}
		},
		computed: {
			// 当前显示数据对象
			currentRechargeAffirm() {
				if (this.rechargeType) {
					return this.storeRechargeAffirm
				}
				if (this.vuex_recharge_data.bankType === '0') {
					const data = this.rechargeAffirmBank
					return data
				} else if (this.vuex_recharge_data.bankType === '1') {
					return this.rechargeAffirmUsdt
				}
			},
		},
		methods: {
			// 充值确认操作
			rechargeAffirm() {
				// 根据传递的充值类型 ，决定接口调用
				this.isloading=true
				this.rechargeType ? this.shopRechargeAjax() : this.rechargeHandelAjax()
			},
			// 个人充值操作
			rechargeHandelAjax() {
				this.vuex_recharge_data.rechargeName=this.userName
				console.log('hahahahah',this.vuex_recharge_data)
				const data = {
					amount: ~~this.vuex_recharge_data.amount,
					img: this.voucherImg,
					...this.vuex_recharge_data,

				}
				this.$u.post('/app/user/recharge', data).then(res => {
					if(res.code==200){
						this.isloading=false
					}
					this.$refs.promptDialog.show({
						confirm: close => {
							close()
							setTimeout(() => {
								this.$u.vuex('vuex_recharge_data', {})
								this.publicJS.backOption()
							}, 500)
						},
						des: this.$t('storeManagement.ReviewTips'),
						title: this.$t('system.Hint'),
						icon: 'tip',
						btnText: this.$t('system.affirm')

					})
				}).catch(err => {
					console.log(err);
				})
			},
			// 店铺充值
			shopRechargeAjax() {	
				this.vuex_recharge_data.rechargeName=this.userName
				console.log('hahahahah',this.vuex_recharge_data)
				const data = {
					amountIncurred: ~~this.vuex_recharge_data.amount,
					payMethod: this.vuex_recharge_data.bankType,
					description: this.vuex_recharge_data.description,
					voucherImg: this.voucherImg,
					channelId:this.vuex_recharge_data.channelId,
					cardId: this.vuex_recharge_data.bankType == 2 ? "" : this.vuex_recharge_data.id
				}
				console.log('=============',this.vuex_recharge_data.id)
				console.log(data)
				this.$u.post('/app/shop/rw/recharge', data).then(res => {
					if(res.code==200){
						this.isloading=false
					}
					this.$u.get('/app/shop/balance').then(res => {
						uni.setStorageSync('availableBalance',res.data ? Number(res.data.availableBalance).toFixed(2) : 0)
							
					})
					this.$refs.promptDialog.show({
						confirm: close => {
							close()
							setTimeout(() => {
								this.$u.vuex('vuex_recharge_data', {})
								this.publicJS.backOption()
							}, 500)
						},
						
						des: this.$t('storeManagement.ReviewTips'),
						title: this.$t('system.Hint'),
						icon: 'tip',
						btnText: this.$t('system.affirm')

					})
				}).catch(err => {
					console.log(err);
				})
			},
			uploadChange() {
				console.log(arguments);
			},
			addImage() {
				this.$u.file.fileUpload('recharge_img', 1).then(res => {
					this.voucherImg = res.fileName
				})
			},
			// 图片选中事件
			imageChoose(data) {
				this.$refs.upload.clear()
				this.$u.file.fileUpload('recharge_img', 1).then(res => {
					this.voucherImg = res.fileName
					this.fileList = [{
						url: this.$u.file.getMedieUrl(this.voucherImg)
					}]
				})
			},
			// 图片移除事件
			imageRemove() {
				this.voucherImg = ''
				this.fileList = []
			},

		}
	}
</script>

<style lang="scss" scoped>
	.recharge-affirm-container {

		.container {
			margin-top: 50rpx;
			padding: 0 40rpx;

			.recharge-affirm-from {
				.item {
					margin-bottom: 40rpx;
				}

				.my-upload {
					width: 200rpx;
					height: 200rpx;
					background: #f4f5f6;
					margin: 10rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					position: relative;
				}

				// /deep/ input {
				// 	pointer-events: none;
				// }

				.submit-btn {
					padding-bottom: 50rpx;

					button {
						background-color: #2935d0;
						color: #fff;
					}
				}
			}
		}
	}
</style>